import React, { Component } from 'react'

export default class Footer extends Component {
    constructor(){
        super();
        this.state={
            num:0
        }
        //! 事件绑定this  bind会返回一个新的函数返回给实例方法
        this.add_2=this.add.bind(this)
                 //! 这里的add和下面的add一样，然后bind方法赋值给前面
        //! 返回赋值的this.add_2绑定在实例自身上，不是原型上
    }
    add(){
        //! this指向问题
        //! componentDidMount/render都是生命周期自己调用的，new的组件实例自己调用
        //! add方法是原型方法，不是组件实例调用，是直接调用
        //! 类中自定义的方法默认开启了严格模式，阻止this指向window (非严格模式下，应该是指向了window)
        //! setSate里面放的是对象,不是替换掉state里面的对象，而是合并
        this.setState({num:this.state.num+1})
    }
    //! 以后尽量用箭头函数声明事件处理函数，省去bind绑定。
    //? 方法在实例自身上
    add1=()=>{
        console.log(this);
        this.setState({num:this.state.num+2})
    }
    componentDidMount(){
        console.log(this)
    }
    render() {
        
        return (
            <div>
                <h2>{this.state.num}</h2>
                {/*类当中的方法调用都必须是this.调用*/}
                <button onClick={this.add_2}>点我+1</button>
                <button onClick={this.add1}>点我+2</button>
            </div>
        )
    }
}

//todo function add(){
//todo     console.log('add');
//todo }
//todo document.querySelector('button').onclick=function(){
//todo     // 事件处理函数是function，不是add()
//todo     console.log(this)//这里指向button
//todo     // add的this指向window
//todo     add()
//todo }